<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title>用户表单</title>
<link rel="stylesheet" href="/resources/layui/css/layui.css">
<link rel="stylesheet" href="/resources/layui/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="/resources/layui/layui_ext/dtree/font/dtreefont.css">
</head>
<body>
<!-- 查询开始 -->
<fieldset class="layui-elem-field site-demo-button">
	<legend>查询条件</legend>
	<form action="" class="layui-form" id="searchFrm">
	<input type="hidden" name="id" id="id">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">用户名称:</label>
				<div class="layui-input-block">
					<input type="text" name="name"  id="name"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">用户地址:</label>
				<div class="layui-input-block">
					<input type="text" name="address" 
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-input-block" style="text-align: center;">
				<button class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>

		</div>
	</form>
</fieldset>
<!-- 查询结束 -->

<!-- 数据表格开始 -->
	<div>
		<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
		<div id="toolbarDemo" style="display: none;">
			<button class="layui-btn layui-btn-sm" shiro:hasPermission="user:create" lay-event="addUser">添加</button>
		</div>
		<div id="barDemo" style="display: none;">
			<a class="layui-btn layui-btn-xs" shiro:hasPermission="user:update" lay-event="updateUser" id='update' >修改</a> 
			<a class="layui-btn layui-btn-danger layui-btn-xs" shiro:hasPermission="user:delete" lay-event="deleteUser" id='delete'>删除</a>
		</div>
	</div>
<!-- 数据表格结束 -->
<!-- 添加修改弹出层开始 -->
<div style="padding: 10px;display: none;" id="addOrUpdateDiv" >
	<form action="" id="dataFrm" class="layui-form" lay-filter="dataFrm">
		<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">所在部门:</label>
			<div class="layui-input-block">
			<input type="hidden" name="id" id="id">
			<input type="hidden" name="deptid" id="deptid">
			<input type="text" name=deptname id="deptname" placeholder="请选择所在部门" class="layui-input layui-unselect">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">排序码:</label>
			<div class="layui-input-block">
				<input type="text" name="ordernum" id="ordernum" 
					autocomplete="off" placeholder="请输入排序码" class="layui-input">
			</div>
		</div>
		</div>
		
			<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">领导部门:</label>
			<div class="layui-input-block">
			<input type="hidden" name="id" id="id">
			<input type="hidden" name="deptid" id="deptid">
			<input type="text" name=deptname id="lerdeaDept" placeholder="请选择所在部门" class="layui-input layui-unselect">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">领导名称:</label>
			<div class="layui-input-block">
				<input type="text" name="ordernum" id="ordernum" 
					autocomplete="off" placeholder="请输入领导名称" class="layui-input">
			</div>
		</div>
		</div>
		
		<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">用户姓名:</label>
			<div class="layui-input-block">
			<input type="text" name="name" id="username" 
					autocomplete="off" placeholder="请输入用户姓名" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">登陆名称:</label>
			<div class="layui-input-block">
				<input type="text" name="loginname" id="loginname" 
					autocomplete="off" placeholder="请输入登录名" class="layui-input">
			</div>
		</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">部门备注:</label>
			<div class="layui-input-block">
				<textarea class="layui-textarea" name="remark" placeholder="请输入部门备注"></textarea>
			</div>
		</div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">用户地址</label>
		 <div class="layui-inline">
		    <input type="text" name="address" id="address" 
					autocomplete="off" placeholder="请输入用户地址" class="layui-input">
		    <div class="layui-input-block">
		    </div>
		 </div>
		 <div class="layui-inline">
		    <label class="layui-form-label">用户性别</label>
		    <div class="layui-inline">
		      <input type="radio" name="sex" lay-filter="sex" value="1" title="男" checked="checked">
		      <input type="radio" name="sex" lay-filter="sex" value="0" title="女">
		    </div>
		 </div>
		  </div>
		 <div class="layui-form-item">
		 <div class="layui-inline">
		    <label class="layui-form-label">入职时间</label>
		    <div class="layui-input-block">
		    <input type="text" name="hiredate" id="hiredate" 
					autocomplete="off" placeholder="请选择入职时间" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-inline">
		    <label class="layui-form-label">是否可用</label>
		    <div class="layui-input-block">
		      <input type="radio" name="available" lay-filter="available" value="1" title="可用" checked="checked">
		      <input type="radio" name="available" lay-filter="available" value="0" title="不可用">
		    </div>
		 </div>
		  </div>
		<div class="layui-input-block" style="text-align: center;">
				<button class="layui-btn" lay-submit="" id="doSubmit" lay-filter="doSubmit">确定</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
	</form>
</div>
<!-- 添加修改弹出层结束 -->
<!-- 分配角色弹出层开始  -->
<div style="padding: 10px;display: none;" id="assignRoleDiv" >
	<table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
		<div id="roleToolbarDemo" style="display: none;">
			<button class="layui-btn layui-btn-sm" lay-event="doAssign">保存</button>
		</div>
</div>
<!-- 分配角色弹出层结束  -->
	<script type="text/javascript" src="/resources/layui/layui.js"></script>
	<script type="text/javascript">
	var tableIns;
	layui.extend({
		dtree : '/resources/layui/layui_ext/dtree/dtree' 
	}).use([ 'table', 'jquery','layer','laydate','form','dtree' ], function() {
			var $ = layui.jquery;
			var table = layui.table;
			var layer = layui.layer;
			var laydate = layui.laydate;
			var form = layui.form;
			var dtree = layui.dtree;
			tableIns=table.render({
				elem : '#userTable',
				url : '/user/loadAllUser',
				cellMinWidth : 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				,height:450,
				toolbar:'#toolbarDemo',
				cols : [ [ 
					{field:'id', width:80, title: 'ID',align:'center'}
				      ,{field:'name', width:100, title: '用户名称',align:'center'}
				      ,{field:'loginname', width:100, title: '登陆名称',align:'center'}
				      ,{field:'address', width:120, title: '用户地址',align:'center'}
				      ,{field:'deptid', width:80, title: '部门ID',align:'center'}
				      ,{field:'remark', width:150, title: '用户备注',align:'center'}
				      ,{field:'hiredate', width:130, title: '入职时间',align:'center'}
				      ,{field:'sex', width:120, title: '性别',align:'center',templet:function(data){
				    	  return data.sex==1?"<font color='greed'>男</font>":"<font color='red'>女</font>";
				      }}
				      ,{field:'imgpath', width:130, title: '用户头像',align:'center',templet:function(data){
				    	  return "<img width=30 height=30 src="+data.imgpath+" />";
				      }}
				      ,{field:'available', width:120, title: '是否可用',align:'center',templet:function(data){
				    	  return data.available==1?"<font color='greed'>可用</font>":"<font color='red'>不可用</font>";
				      }}
				      ,{field:'ordernum', width:100, title: '排序码',align:'center'}
				      ,{width:250, title: '操作',fixed:"right",align:'center',toolbar:'#barDemo'}
				      ] ],
				page : true
			});
			//监控查询事件
			form.on("submit(doSearch)",function(data){
				var params=$("#searchFrm").serialize();
				alert(params)
				tableIns.reload({
					url:'/user/loadAllUser?'+params
				})
				//刷新表格
				return false;
			});
			//监听表头事件
			table.on('toolbar(userTable)', function(obj){
			  var checkStatus = table.checkStatus(obj.config.id);
			  switch(obj.event){
			    case 'addUser':
					openAddUser();
			    break;
			  };
			});
			//监听表体事件
			table.on('tool(userTable)', function(obj){
			  switch(obj.event){
			    case 'updateUser':
			    	openUpdateUser(obj.data);
			    break;
			    case 'deleteUser':
			      deleteUser(obj.data);
			    break;
			    case 'resetUserPwd':
			    resetUserPwd(obj.data);
			    break;
			    case 'assignRole':
			    	assignRole(obj.data);
			    break;
			  };
			});
			
			var url;
			var index;
			//打开添加页面
			function openAddUser(){
			 form.render();
			 index = layer.open({
					type : 1,
					title : '添加部门',
					content : $("#addOrUpdateDiv"),  
					skin : 'layui-layer-molv',
					area : [ '700px', '500px' ],
					shadeClose:true,//设置是否点击遮罩关闭
					maxmin:true,//设置是否显示最大化和最小化的按钮
					resize:true,//设置是否支持拉伸缩小放大  默认为true
					success: function(layero, index){   //弹出成功之后的回调方法
						 //清空表单里面的数据
						 $("#dataFrm")[0].reset();
						url="/user/addUser";
						laydate.render({
							elem:'#hiredate',
							type:'date',
							value:new Date()
						});
					}
				});
			}

			//打开修改页面
			function openUpdateUser(data){
				 form.render();
				 index = layer.open({
						type : 1,
						title : '修改用户',
						content : $("#addOrUpdateDiv"),  
						skin : 'layui-layer-molv',
						area : [ '700px', '500px' ],
						shadeClose:true,//设置是否点击遮罩关闭
						maxmin:true,//设置是否显示最大化和最小化的按钮
						resize:true,//设置是否支持拉伸缩小放大  默认为true
						success: function(layero, index){   //弹出成功之后的回调方法
							 //清空表单里面的数据
							$("#dataFrm")[0].reset();
							form.val("dataFrm",data);
							url="/user/updateUser";
							$("#dtree").removeClass("layui-show layui-anim layui-anim-upbit");
						}
					});
			}
			
			//监听添加修改的保存事件
			form.on("submit(dataFrm)",function(data){
				var params=$("#dataFrm").serialize();
				$.post(url,params,function(obj){
					layer.msg(obj.msg);
					//刷新数据表格
					tableIns.reload();
					//关闭弹出层
					layer.close(index);
				})				
				return false;
			});

		/* 	 //删除
			 function deleteUser(data){
						 layer.msg("确定要删除【"+data.name+"】吗?", {
						        time: 20000, //20s后自动关闭
						        btn: ['确定', '算了'],
						        yes:function(){
						        	$.get('/user/deleteUser?id='+data.id,function(obj){
						        		layer.msg(obj.msg);
						        		if(obj.code==200){
						        			//刷新数据表格
											tableIns.reload();
											//刷新下拉框
											userTree.reload();
						        		}
						        	});
						        }
						 }); 
			 }
			  */
			//删除
			 function deleteUser(data){
						 layer.confirm("确定要删除【"+data.name+"】吗?", {
						        time: 20000, //20s后自动关闭
						        btn: ['确定', '算了'],
						        yes:function(){
						        	$.get('/user/deleteUser?id='+data.id,function(obj){
						        		layer.msg(obj.msg);
						        		if(obj.code==200){
						        			//刷新数据表格
											tableIns.reload();
											//刷新下拉框
											userTree.reload();
						        		}
						        	});
						        }
						 }); 
			 }
		});
			function reloadTable(userid){
				tableIns.reload({
					url:"/user/loadAllUser?id="+userid
				});
			};
	</script>
</body>
</html>